<style>
    .layui-input-inline{margin-top:10px;}
    .xxpayPopupDiv .layui-form-label {
        width:15% !important;
        margin-left:1%;
    }
    .xxpayPopupDiv .layui-input-inline {
        width: 33% !important;
    }
</style>
<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>系统管理</cite></a>
        <a><cite>操作日志</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">操作日志</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-row">
                        <div class="layui-form" style="float:right; margin-bottom: 10px;">
                            <div class="layui-form-item" style="margin:0;">
                                <div id="timeDiv" class="layui-form-item" style="margin:0;">
                                <div class="layui-input-inline">
                                    <input type="text" id="userId" placeholder="用户ID" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" id="userName" placeholder="用户名" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" id="userIp" placeholder="IP地址" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" id="methodRemark" placeholder="业务描述" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <select id="sysType" lay-search="">
                                        <option value="">选择系统</option>
                                        <option value="1">运营平台</option>
                                        <option value="2">商户</option>
                                        <option value="3">代理商</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <a id="search" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    <table id="cList" lay-filter="cList"></table>
            </div>
        </div>
    </div>
</div>
</div>

<script>


    layui.use(['table','util','admin', 'form', 'timePick'], function(){
        var table = layui.table
        ,$ = layui.$
        ,form = layui.form
        ,admin = layui.admin
        ,element = layui.element
        ,timePick = layui.timePick;

        timePick.init();  //第一个参数表示开始时间   第二个表示结束时间   0,0今天   -1,-1昨天   -7,0近一周   以此类推
        // 全部时间
        $("#dataSelect").val("");
        //清空选择时间
        $("#createTimeStart").val("");
        $("#createTimeEnd").val("");
        $("#ctrlTimeStart").val("");
        $("#ctrlTimeEnd").val("");
        $(".hideDateInputDiv").addClass('layui-hide');   //只读时间 DIV 隐藏
        $(".ctrlDateInputDiv").addClass('layui-hide');    //可选控件时间DIV  隐藏

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息


        table.render({
            elem: '#cList'
            ,url: layui.setter.baseUrl + '/sys/syslog/list'
            ,id: 'tableReload'
            ,where: {
                access_token: layui.data(layui.setter.tableName).access_token
            }
            ,cols: [[
                {field: 'userId',title: '用户ID'}
                ,{field: 'userName',title: '用户名'}
                ,{field: 'userIp',title: '用户IP'}
                ,{title: '系统', templet: '<span>{{ d.sysType == 1?"运营平台":d.sysType == 2?"商户系统": d.sysType == 3?"代理商系统":"" }}</span>'}
                ,{field: 'methodRemark',title: '业务描述'}
                ,{field: 'methodName',title: '方法'}
                ,{field: 'optReqParam',title: '请求参数'}
                ,{field: 'optResInfo',title: '响应结果'}
                ,{field:'createTime',  title: '创建时间', templet: '<div>{{ layui.util.toDateString(d.createTime) }}</div>' }
            ]]
            ,page: true
            ,skin: 'line'
        });
         // 搜索
        var $ = layui.$, active = {
            reload: function(){
                var userId = $('#userId').val();
                var sysType = $('#sysType').val();
                var userName = $('#userName').val();
                var userIp = $('#userIp').val();
                var methodRemark = $('#methodRemark').val();
                var createTimeStart = $('#createTimeStart').val();
                var createTimeEnd = $('#createTimeEnd').val();
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        userId: userId,
                        sysType: sysType,
                        userName: userName.trim(),
                        userIp: userIp.trim(),
                        methodRemark: methodRemark.trim(),
                        createTimeStart: createTimeStart,
                        createTimeEnd: createTimeEnd
                    }
                });
            }
        };
        $('#search').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 渲染表单
        form.render();


    })
</script>